<template>
  <div class="pages">
    <div ref="imageContentEle">
      <div class="top">
        <div class="top-avatar">
          <img :src="avatar(employeeInfo.image)" />
        </div>
        <div class="top-info">
          <div class="top-lline">
            <div class="user0">
              <span class="user0-name">{{ employeeInfo.name }}</span>
              <span class="user0-hr">|</span>
              <span class="user0-text">{{ employeeInfo.gender }}</span>
              <span class="user0-hr">|</span>
              <span class="user0-text">{{ employeeInfo.workType }}</span>
              <span class="user0-hr">|</span>
              <span class="user0-text">{{ employeeInfo.birthday }}</span>
            </div>
            <div class="phone">
              <span>{{ employeeInfo.mobile }}</span>
            </div>
          </div>
          <div class="top-lline">
            <div class="user1">
              <span class="user1-text">老板：</span>
              <span class="user1-name">{{ bossInfo.bossName }}</span>
            </div>
            <div class="phone">
              <span>{{ bossInfo.bossTel }}</span>
            </div>
          </div>
          <div class="user1">
            <!-- <span class="user1-text">项目：</span>
            <span class="user1-company">成都东安湖图书馆项目</span>-->
          </div>
        </div>
      </div>
      <div class="bottom">
        <table class="table" cellspacing="0">
          <tr>
            <th class="th-0">月份</th>
            <th class="th-1">
              工天
              <span class="th-text">(个工)</span>
            </th>
            <th>状态</th>
          </tr>
          <template v-for="(item, index) in list" :key="index">
            <tr>
              <td class="tb-top0">{{ `${item.recordYear}年${item.recordMonth}月` }}</td>
              <td class="tb-top1">{{ item.recordTotal }}</td>
              <td />
            </tr>
            <template v-for="(item1, index1) in item.detail" :key="index1">
              <tr>
                <td class="tb-info0">{{ `${item1.recordMonth}月${item1.recordDay}日` }}</td>
                <td class="tb-top1">{{ item1.recordNum }}</td>
                <td class="tb-info2">{{ item1.desc }}</td>
              </tr>
            </template>
          </template>
        </table>
        <div v-for="(item2, index2) in list" :key="index2" class="img_list">
          <div v-for="(item3, index3) in item2.images" :key="index3" class="img_list-item">
            <Suspense>
              <template #default>
                <img class="img_list-img1" crossorigin="anonymous" :src="IMGURL + item3.img" @click="previewImg(IMGURL + item3.img)" />
              </template>
              <template #fallback>
                <h1>Loading !...</h1>
              </template>
            </Suspense>
            <img class="img_list-img2" crossorigin="anonymous" :src="item3.base64Path" @click="previewImg(item3.base64Path)" />
          </div>
        </div>
      </div>
    </div>
    <div class="button">
      <div @click="saveImage()">生成图片</div>
    </div>
  </div>
  <Popup v-model:show="show" closeable round>
    <div class="pop">
      <div class="img_title">请长按下图进行保存</div>
      <div class="img_info">
        <Suspense>
          <template #default>
            <img :src="dataUrl" />
          </template>
          <template #fallback>
            <h1>Loading !...</h1>
          </template>
        </Suspense>
      </div>
    </div>
  </Popup>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { allsigndata, getboss, workerinfo } from '@/api/businessApi'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import html2canvas from 'html2canvas'
import { ImagePreview, Popup, Toast } from 'vant'
export default defineComponent({
  components: { Popup },
  setup() {
    const store = useStore()
    let promisea, promiseb, promisec

    const IMGURL = ref(import.meta.env.VITE_APP_IMGURL)
    const avatar = (img: string): string => {
      let newimg: string = ''
      if (img.indexOf('http') === -1) {
        newimg = IMGURL.value + img
      } else {
        newimg = img
      }
      return newimg
    }
    /** ---------------截屏下载---------------------*/
    const imageContentEle = ref<any>(null)
    const dataUrl = ref<string>('')
    const show = ref<boolean>(false)
    const saveImage = () => {
      html2canvas(imageContentEle.value, { useCORS: true, backgroundColor: '#fff' }).then((res) => {
        dataUrl.value = res.toDataURL('image/jpeg', 1.0) // 图片转为下载路径
        show.value = true
        console.log(dataUrl.value)
      })
    }
    /** --------------------------------------------*/

    /** ------------------获取参数-------------------*/
    const route = useRoute()
    const recordYear = route.query.recordYear
    const recordMonth = route.query.recordMonth
    /** --------------------------------------------*/

    /** ----------------获取数据---------------------*/
    const list = ref<any>([])
    const getList = () => {
      promisea = allsigndata({
        foremanTel: store.getters.foremanTel,
        workerId: store.getters.workerId,
        bossTel: store.getters.bossTel,
        recordYear: recordYear,
        recordMonth: recordMonth
      }).then((res) => {
        list.value = res.data
      })
    }
    getList()
    const bossInfo = reactive({ bossName: '', bossTel: '' })
    const getbossInfo = () => {
      promiseb = getboss({
        foremanTel: store.getters.foremanTel,
        workerId: store.getters.workerId,
        bossTel: store.getters.bossTel
      }).then((res) => {
        bossInfo.bossName = res.data[0]?.bossName
        bossInfo.bossTel = store.getters.bossTel
      })
    }
    getbossInfo()

    const employeeInfo = reactive({
      birthday: '',
      gender: '',
      mobile: '',
      name: '',
      nation: '',
      workType: '',
      image: ''
    })
    const getworkerinfo = () => {
      promisec = workerinfo(store.getters.workerId).then((res) => {
        Object.assign(employeeInfo, res.data)
      })
    }
    getworkerinfo()
    /** --------------------------------------------*/

    /** ----------------图片预览---------------------*/
    const previewImg = (img: string) => {
      ImagePreview({ images: [img], closeable: true, showIndex: false })
    }

    /** --------------------------------------------*/
    Promise.all([promisea, promiseb, promisec]).then(() => {
      console.log('guanbi')
      Toast.clear()
    })
    return {
      previewImg,
      saveImage,
      imageContentEle,
      bossInfo,
      employeeInfo,
      list,
      dataUrl,
      show,
      IMGURL,
      avatar
    }
  }
})
</script>

<style lang="scss" scoped>
.pages {
  background: #f7f7f7;
  min-height: 100vh;
  padding: 16px 21px;
}
.top {
  width: 708px;
  height: 156px;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 0 20px 31px;
  display: flex;
  &-avatar {
    height: 115px;
    width: 115px;
    border-radius: 6px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &-info {
    padding-left: 10px;
    padding-right: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  &-lline {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.phone {
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: 400;
  color: #333333;
  span {
    padding-right: 10px;
  }

  &-img {
    width: 28px;
    height: 29px;
  }
}
.user0 {
  &-name {
    font-size: 30px;
    color: #333333;
    font-weight: bold;
  }
  &-text {
    font-size: 26px;
    color: #666666;
  }
  &-hr {
    font-size: 26px;
    color: #666666;
    padding: 0 6px;
  }
}
.user1 {
  font-size: 24px;
  font-weight: 400;
  &-text {
    color: #666666;
  }
  &-name {
    color: #333333;
  }
  &-company {
    color: #333333;
  }
}
.bottom {
  padding: 17px;
  width: 708px;
  background: #ffffff;
  padding-bottom: 40px;
}
.table {
  width: 100%;
  th {
    color: #333333;
    height: 72px;
    font-size: 30px;
    font-weight: 400;
  }
  .th {
    &-text {
      font-size: 22px;
    }
    &-0 {
      width: 248px;
    }
    &-1 {
      width: 197px;
    }
  }

  tr th {
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-top: 1px solid #333333;
  }
  tr th:first-child {
    border-left: 1px solid #333333;
  }
  tr td {
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
  }
  tr td:first-child {
    border-left: 1px solid #333333;
  }
  td {
    height: 72px;
  }
}
.tb {
  &-top0 {
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    padding-left: 14px;
  }
  &-top1 {
    color: #333333;
    text-align: right;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 18px;
  }
  &-info0 {
    color: #666666;
    font-size: 26px;
    padding-left: 14px;
  }
  &-info2 {
    color: #666666;
    text-align: center;
    font-size: 18px;
  }
}
.button {
  padding: 58px 9px;
  text-align: center;
  div {
    width: 690px;
    height: 90px;
    background: linear-gradient(135deg, #56b6ff 0%, #56b6ff 87%, #8b9eff 100%);
    border-radius: 10px;
    color: #ffffff;
    font-size: 40px;
    line-height: 90px;
  }
}
::v-deep(.van-popup) {
  border-radius: 10px;
}
.pop {
  width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
  padding-bottom: 20px;
  max-height: 80vh;
  img {
    width: 100%;
  }
  .img_title {
    text-align: center;
    width: 680px;
    color: #000;
    font-size: 24px;
    padding: 40px 0;
    border-bottom: 1px solid #ccc;
  }
  .img_info {
    overflow: auto;
    width: 680px;
    border: 1px solid #ccc;
    border-top-color: transparent;
  }
}
.img_list {
  display: flex;
  flex-wrap: wrap;
  padding-top: 60px;
  &-item {
    display: flex;
    align-items: center;
    padding-top: 20px;
  }
  &-img1 {
    width: 146px;
    height: 197px;
  }
  &-img2 {
    width: 221px;
    height: 110px;
  }
}
</style>
